<template>
	<view class="container" >
		<view class="tui-news-title" v-if="info!=null">{{info.title}}</view>
		<view class="tui-sub-info" v-if="info!=null">
			<view class="tui-sub-left">
				<text>{{info.update_time}}</text>
			</view>
			<view class="tui-sub-right">阅读 {{info.view}}</view>
		</view>
		<video v-if="info!=null && info.video!=''" class="tui-video" :src="info.video" controls
		 autoplay objectFit="fill" :poster="info.thumb" :style="'height:'+vh+'px'">
			<!-- <cover-view class="tui-back-bg" @tap="goBack"></cover-view>
			<cover-image @tap="goBack" class="tui-video-back" src="/static/images/news/icon_back.png"></cover-image> -->
		</video>
		<rich-text v-if="info!=null" class="tui-news-content" :nodes="info.content">
		</rich-text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadding: false,
			pullUpOn: true,
			info:null,
			vh:240
		}
	},
	onLoad(opt) {
		this.id = opt.id;
	},
	onShow() {
		this.getDoc();
	},
	methods: {
		getDoc(){
			this.tui.get('cms/index/doc',{id:this.id}).then(res=>{
				if(res.code >0){
					this.info = res.data;
					this.vh =parseInt(res.data.vh);
				}else{
					this.tui.toast(res.msg);
					setTimeout(function(){uni.navigateBack()},2000);
				}
			})
		}
	},

}
</script>

<style>
page {
	background: #fff;
	color: #333;
}

.container {
	padding: 40rpx 30rpx 110rpx 30rpx;
	box-sizing: border-box;
}

.tui-news-title {
	font-size: 48rpx;
	font-weight: 500;
	text-align: justify;
}

.tui-sub-info {
	padding-top: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	color: #999;
}

.tui-author {
	color: #5677fc;
	padding-right: 20rpx;
}

.tui-news-content {
	padding-top: 40rpx;
}
.tui-news-content img{
	max-width:100% ;
}

.tui-news-source {
	font-size: 24rpx;
	color: #999;
}
.tui-black {
	color: #333;
	padding-left: 12rpx;
}


.tui-header-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	font-size: 30rpx;
}


.tui-reply-box {
	border-radius: 8rpx;
	overflow: hidden;
	margin-top: 16rpx;
}

.tui-cell-last {
	display: flex;
	align-items: center;
	word-wrap: break-word;
	color: #5677fc;
}
.tui-flex-1 {
	flex: 1;
	width: 100%;
}

.tui-reply-nickname {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-bottom: 8rpx;
}

.tui-footer {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	margin-top: 16rpx;
	color: #9a9a9a;
}

.tui-primary {
	color: #5677fc !important;
}


.tui-right-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}
.tui-video {
	width: 100%;
	height: 440rpx;
	object-fit: fill;
}


</style>
